<script setup>
import { onMounted, onBeforeUnmount, ref } from "vue"
import { useRouter } from "vue-router"
import * as echarts from "echarts"
import "echarts/map/js/china"
import "echarts/map/js/province/yunnan"

const chart = ref(null)
const isChinaMap = ref(true)
const router = useRouter()

const getColorByValue = (value) => {
  const colors = ["green", "yellow", "red", "#14c5f0"]
  return colors[value] || colors[3]
}

const statusMap = {
  0: "可以使用",
  1: "暂停使用",
  2: "禁止使用",
}

const buildingList = ref([
  {
    id: 1,
    name: "昆明",
    coordinateX: 102.7183,
    coordinateY: 25.038933,
    status: 0,
    imgUrl: "",
  },
  {
    id: 2,
    name: "北京",
    coordinateX: 116.407396,
    coordinateY: 39.9042,
    status: 0,
    imgUrl: "",
  },
  {
    id: 3,
    name: "上海",
    coordinateX: 121.4737,
    coordinateY: 31.230416,
    status: 2,
    imgUrl: "",
  },
  {
    id: 4,
    name: "广州",
    coordinateX: 113.2644,
    coordinateY: 23.1291,
    status: 1,
    imgUrl: "",
  },
  {
    id: 5,
    name: "深圳",
    coordinateX: 114.0579,
    coordinateY: 22.5431,
    status: 0,
    imgUrl: "",
  },
  {
    id: 6,
    name: "成都",
    coordinateX: 104.0668,
    coordinateY: 30.5728,
    status: 1,
    imgUrl: "",
  },
])

// 将 buildingList 转换为 ECharts 需要的格式
const convertBuildingListToMapData = (list) => {
  return list.map((building) => ({
    name: building.name,
    value: [building.coordinateX, building.coordinateY, building.status],
  }))
}

const createMapOptions = (mapName, data) => {
  return {
    tooltip: {
      trigger: "item",
      formatter: (params) => {
        const statusText = statusMap[params.value[2]] || "未知状态"
        return `${params.name}<br/>状态: ${statusText}`
      },
    },
    geo: {
      map: mapName,
      roam: false,
      zoom: 1.15,
      label: {
        emphasis: { show: false },
      },
      itemStyle: {
        normal: {
          areaColor: "rgba(2,37,101,.5)",
          borderColor: "rgba(112,187,252,.5)",
        },
        emphasis: {
          areaColor: "rgba(2,37,101,.8)",
        },
      },
    },
    series: [
      {
        name: "高亮点",
        type: "effectScatter",
        coordinateSystem: "geo",
        symbolSize: 10,
        rippleEffect: {
          scale: 2.5,
          brushType: "stroke",
        },
        itemStyle: {
          color: (params) => getColorByValue(params.data.value[2]),
        },
        data: data,
      },
    ],
  }
}

onMounted(() => {
  if (!chart.value) return
  const myChart = echarts.init(chart.value)

  const data = convertBuildingListToMapData(buildingList.value)

  myChart.setOption(createMapOptions("china", data))

  const mapClickHandler = (params) => {
    if (params.componentType === "geo") {
      const provinceName = params.name

      if (provinceName === "云南") {
        isChinaMap.value = false
        myChart.setOption(createMapOptions(provinceName, data))
        myChart.off("click", mapClickHandler)
      } else {
        alert("点击了非省份地图区域，当前只开放云南省")
      }
    }
  }

  myChart.on("click", mapClickHandler)

  myChart.on("click", (params) => {
    if (params.seriesType === "effectScatter") {
      router.push({
        path: "/details/building",
        params: {
          id: 999,
        },
      })
    }
  })

  myChart.getZr().on("click", (event) => {
    const pointInPixel = [event.offsetX, event.offsetY]
    if (!myChart.containPixel("geo", pointInPixel) && !isChinaMap.value) {
      isChinaMap.value = true
      myChart.setOption(createMapOptions("china", data))
      myChart.on("click", mapClickHandler)
    }
  })

  const handleResize = () => {
    myChart.resize()
  }

  window.addEventListener("resize", handleResize)

  onBeforeUnmount(() => {
    window.removeEventListener("resize", handleResize)
    myChart.off("click", mapClickHandler)
  })
})
</script>

<template>
  <div class="container">
    <div class="overview">
      <ul>
        <li><span>检测总数：99</span></li>
        <li><span>可以使用：92</span></li>
        <li><span>暂停使用：4</span></li>
        <li><span>禁止使用：3</span></li>
      </ul>
    </div>
    <div ref="chart" :style="{ width: '100%', height: '100%' }"></div>
  </div>
</template>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  position: relative;

  .overview {
    position: absolute;
    left: 10px;
    top: 10px;
    border: 1px solid rgba(7, 118, 181, 0.5);
    box-shadow: inset 0 0 10px rgba(7, 118, 181, 0.4);
    color: #fff;

    ul {
      li {
        margin: 10px;
        position: relative;
        &::before {
          position: absolute;
          content: "";
          width: 5px;
          height: 5px;
          border-radius: 10px;
          left: 5px;
          top: 50%;
          transform: translate(0, -50%);
        }
        &:nth-child(1)::before {
          background: rgba(22, 214, 255, 0.9);
          box-shadow: 0 0 5px rgba(22, 214, 255, 0.9);
        }
        &:nth-child(2)::before {
          background: rgba(0, 128, 0, 0.9);
          box-shadow: 0 0 5px rgba(0, 128, 0, 0.9);
        }
        &:nth-child(3)::before {
          background: rgba(255, 255, 0, 0.9);
          box-shadow: 0 0 5px rgba(255, 255, 0, 0.9);
        }
        &:nth-child(4)::before {
          background: rgba(255, 0, 0, 0.9);
          box-shadow: 0 0 5px rgba(255, 0, 0, 0.9);
        }

        span {
          color: #fff;
          font-size: 14px;
          padding: 0 10px 0 20px;
        }
      }
    }
  }
}
</style>
